<template>
  <view class="payment-page">
    <!-- 顶部导航栏 -->
    <!-- <view class="header-nav">
      <view class="nav-content">
        <view class="back-btn" @click="goBack">
          <text class="iconfont-v2 icon-youjiantou back-icon" style="transform: rotate(180deg);"></text>
        </view>
        <text class="page-title">支付</text>
        <view class="header-actions">
          <text class="iconfont-v2 icon-gengduo more-icon"></text>
        </view>
      </view>
    </view> -->

    <!-- 支付倒计时 -->
    <view class="payment-timer">
      <text class="timer-label">支付剩余时间</text>
      <text class="timer-display">{{ formatTime(remainingTime) }}</text>
    </view>

    <!-- 支付金额 -->
   <view class="payment-amount">
      <text class="amount-symbol">¥</text>
      <text class="amount-value">{{ paymentAmount }}</text>
    </view>

    <!-- 支付方式选择 -->
    <view class="payment-methods">
      <!-- <text class="method-title">选择支付方式</text> -->
      
      <!-- 微信支付 -->
      <view class="payment-method" :class="{ active: selectedMethod === 'wechat' }" @click="selectPaymentMethod('wechat')">
        <view class="method-icon wechat-icon">
          <text class="iconfont-v2 icon-weixin"></text>
        </view>
        <view class="method-content">
          <text class="method-name">微信支付</text>
        </view>
        <view class="method-radio">
          <text class="iconfont-v2 icon-weibiaoti--copy radio-checked" v-if="selectedMethod === 'wechat'"></text>
          <text class="radio-unchecked" v-else></text>
        </view>
      </view>

      <!-- 银行卡支付 -->
      <view class="payment-method" :class="{ active: selectedMethod === 'bankcard' }" @click="selectPaymentMethod('bankcard')">
        <view class="method-icon bankcard-icon">
          <text class="iconfont-v2 icon-yinhangka-F"></text>
        </view>
        <view class="method-content">
          <text class="method-name">银行卡支付</text>
        </view>
        <view class="method-radio">
          <text class="iconfont-v2 icon-weibiaoti--copy radio-checked" v-if="selectedMethod === 'bankcard'"></text>
          <text class="radio-unchecked" v-else></text>
        </view>
      </view>

		<view class="payment-footer">
		  <button class="pay-button" @click="showPaymentModal">
		    <!-- <text>确认支付 ¥{{ paymentAmount }}</text> -->
			<text>立即支付</text>
		  </button>
		</view>
    </view>

    <!-- 订单信息 -->
  <!--  <view class="order-info">
      <text class="info-title">订单信息</text>
      <view class="info-item">
        <text class="info-label">订单号：</text>
        <text class="info-value">{{ orderNumber }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">商品名称：</text>
        <text class="info-value">意大利超火的球鞋</text>
      </view>
      <view class="info-item">
        <text class="info-label">商品数量：</text>
        <text class="info-value">1件</text>
      </view>
    </view> -->

    <!-- 支付按钮 -->
   <!-- <view class="payment-footer">
      <button class="pay-button" @click="showPaymentModal">
        <text>确认支付 ¥{{ paymentAmount }}</text>
      </button>
    </view> -->

    <!-- 支付确认弹窗 -->
    <view class="modal-overlay" v-if="showModal" @click="closeModal">
      <view class="payment-modal" @click.stop>
        <view class="modal-header">
          <text class="modal-title">确认支付</text>
          <!-- <text class="iconfont-v2 icon-guanbi close-btn" @click="closeModal"></text> -->
		  <text class="iconfont-v2 close-btn" @click="closeModal">&#10006;</text>
        </view>
        <view class="modal-content">
          <view class="payment-summary">
            <!-- <text class="summary-label">支付金额</text>
            <text class="summary-amount">¥{{ paymentAmount }}</text> -->
			<text class="summary-label">订单编号</text>
			<text class="summary-amount">{{ orderNumber }}</text>
          </view>
          <view class="payment-method-info">
            <text class="method-label">付款方式</text>
            <text class="method-name">{{ getPaymentMethodName(selectedMethod) }}</text>
          </view>
        </view>
        <view class="modal-actions">
          <!-- <button class="cancel-btn" @click="closeModal">
            <text>取消</text>
          </button> -->
          <button class="confirm-btn" @click="confirmPayment">
            <text>立即支付</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 响应式数据
      remainingTime: 15 * 60, // 15分钟，以秒为单位
      paymentAmount: "76.6",
      selectedMethod: "wechat",
      showModal: false,
      orderNumber: "8283894949838",
      timer: null
    }
  },
  onLoad() {
    // 页面加载时启动倒计时
    this.startTimer();
  },
  onUnload() {
    // 页面卸载时清除定时器
    this.clearTimer();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    formatTime(seconds) {
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds % 3600) / 60);
      const secs = seconds % 60;
      
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    },
    selectPaymentMethod(method) {
      this.selectedMethod = method;
      console.log('选择支付方式:', method);
    },
    showPaymentModal() {
      if (!this.selectedMethod) {
        uni.showToast({
          title: '请选择支付方式',
          icon: 'none'
        });
        return;
      }
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
    },
    confirmPayment() {
      console.log('确认支付:', this.selectedMethod, this.paymentAmount);
      
      // 模拟支付过程
      uni.showLoading({
        title: '支付中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        this.closeModal();
        
        uni.showToast({
          title: '支付成功',
          icon: 'success'
        });
        
        // 支付成功后跳转到订单详情或订单列表
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/fast/order-detail'
          });
        }, 1500);
      }, 2000);
    },
    getPaymentMethodName(method) {
      const methodNames = {
        'wechat': '微信支付',
        'bankcard': '银行卡支付',
        'alipay': '支付宝支付'
      };
      return methodNames[method] || '未知支付方式';
    },
    startTimer() {
      this.timer = setInterval(() => {
        if (this.remainingTime > 0) {
          this.remainingTime--;
        } else {
          // 倒计时结束，跳转回上一页
          this.clearTimer();
          uni.showToast({
            title: '支付超时',
            icon: 'none'
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }
      }, 1000);
    },
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.payment-page {
  min-height: 100vh;
  background: #fff;
  padding-bottom: 160rpx;
}

.header-nav {
  background: white;
  padding: 20rpx 40rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .back-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      .back-icon {
        font-size: 32rpx;
        color: #333;
      }
    }

    .page-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }

    .header-actions {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .more-icon {
        font-size: 32rpx;
        color: #333;
      }
    }
  }
}

.payment-timer {
  display: flex;
  background: white;
  padding: 100rpx 0rpx 0rpx 0rpx;
  text-align: center;
  justify-content: center;
  .timer-label {
    font-size: 36rpx;
    color: #9098A0;
    //margin-bottom: 16rpx;
    display: block;
  }

  .timer-display {
    font-size: 36rpx;
	margin-bottom: 16rpx;
    //font-weight: 600;
    color: #9098A0;
    //font-family: 'Courier New', monospace;
  }
}

.payment-amount {
  background: white;
  padding:0rpx 0rpx 100rpx 0rpx;
  // margin-bottom: 20rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  // box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .amount-symbol {
    font-size: 36rpx;
    color: #666;
    vertical-align: top;
    margin-right: 8rpx;
  }

  .amount-value {
    font-size: 72rpx;
    font-weight: 700;
    color: #333;
  }
}

.payment-methods {
  // background: white;
  padding: 40rpx;
  // margin-bottom: 20rpx;
  // box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .method-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 30rpx;
    display: block;
  }

  .payment-method {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 2rpx solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
    &:last-child {
      border-bottom: none;
    }
	.payment-method:last-child {
		border-bottom: none; /* 最后一个 view 去掉下边框 */
	}
    &.active {
      .method-radio .radio-checked {
        color: #0EA828;
      }
    }

    .method-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 24rpx;

      .iconfont-v2 {
        font-size: 70rpx;
        // color: #1AAD19;
      }

      &.wechat-icon {
		  font-size: 70rpx;
		  color: #1AAD19
        // background: #1AAD19;
      }

      &.bankcard-icon {
		  color: #02A9F1;
        // background: #FF6B35;
      }

      &.alipay-icon {
		  color: #02A9F1;
        // background: #1677FF;
      }
	  
    }
	

    .method-content {
      flex: 1;

      .method-name {
        font-size: 32rpx;
        color: #2E343A;
        font-weight: 500;
      }
    }

    .method-radio {
      .radio-checked {
        font-size: 32rpx;
        color: #ED6567;
      }

      .radio-unchecked {
        width: 32rpx;
        height: 32rpx;
        border: 2rpx solid #ddd;
        border-radius: 50%;
        display: block;
      }
    }
  }
}

.order-info {
  background: white;
  padding: 40rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .info-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 30rpx;
    display: block;
  }

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 2rpx solid #f8f9fa;

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      font-size: 28rpx;
      color: #666;
    }

    .info-value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

.payment-footer {
  position: fixed;
  // bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 20rpx 100rpx;
  //border-top: 2rpx solid #f0f0f0;

  .pay-button {
    width: 100%;
    background: #ED6567;
    color: white;
    border: none;
    border-radius: 50rpx;
    padding: 32rpx;
    font-size: 32rpx;
    //font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: #d55a54;
    }

    &:active {
      transform: scale(0.98);
    }

    text {
      color: white;
    }
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  .payment-modal {
    background: white;
    //border-radius: 24rpx;
	border-top-left-radius: 24rpx; /* 左上角圆角 */
	border-top-right-radius: 24rpx;
    // width: 600rpx;
	width: 100vw;
    // max-width: 90vw;
    overflow: hidden;
	position: fixed;
	bottom: 0;
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40rpx;
      // border-bottom: 2rpx solid #f0f0f0;

      .modal-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
		box-sizing: border-box; /* 确保边框和内边距包含在宽度和高度内 */
		margin: auto; /* 水平居中 */
      }

      .close-btn {
		display: flex;
		justify-content: flex-end;
        font-size: 32rpx;
        color: #999;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          color: #ED6567;
        }
      }
    }

    .modal-content {
      padding: 40rpx;

      .payment-summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // margin-bottom: 30rpx;
        padding: 30rpx 0rpx;
        // background: #f8f9fa;
        // border-radius: 16rpx;
		border-bottom: 2rpx solid #F2F0F0;
        .summary-label {
          font-size: 28rpx;
          color: #666;
        }

        .summary-amount {
          font-size: 30rpx;
          // font-weight: 600;
          color: #333333;
        }
      }

      .payment-method-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
		padding: 30rpx 0rpx;
        // background: #f8f9fa;
        // border-radius: 16rpx;
		border-bottom: 2rpx solid #F2F0F0;
        .method-label {
          font-size: 28rpx;
          color: #666;
        }

        .method-name {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }
      }
    }

    .modal-actions {
      display: flex;
      gap: 20rpx;
      padding: 40rpx;

      .cancel-btn, .confirm-btn {
        flex: 1;
        padding: 24rpx;
        border-radius: 50rpx;
        font-size: 28rpx;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;

        text {
          color: inherit;
        }
      }

      .cancel-btn {
        background: #f8f9fa;
        color: #666;
        border: 2rpx solid #e0e0e0;

        &:hover {
          background: #e9ecef;
        }
      }

      .confirm-btn {
        background: #ED6567;
        color: white;
        border: none;

        &:hover {
          background: #d55a54;
        }
      }
    }
  }
}
</style>